<template>

  <div class="search-bar">
    <div class="search-bar-wrap">

      <van-icon name="search" size="18px" color="#858C96"  class="search"/>

      <input
        type="text"
        v-model="searchWord"
        class="search-input"
        :placeholder="hotSearch || ''"
        @click="onSearchBarClick"
        @input="onChange"
        confirm-type="search"
        @confirm="onConfirm"
        placeholder-style="color:#adb4be;font-size:15px"
        :focus="focus"
      >

      <van-icon name="close"  size="16px" color="#858C96" class="close" @click="onClearClick" v-if="searchWord"/>

    </div>
  </div>

</template>

<script>

  export default {
    props : {
      hotSearch : {
        type : String,
        default : 'c',
      },
      focus: {
        type: Boolean,
        default: true
      },
    },
    data(){
      return {
        searchWord : '',
      }
    },
    methods : {
      onSearchBarClick(){ //搜索框点击事件
        this.$emit('onClick')
      },
      onClearClick(){ //清空搜索框事件
        this.searchWord = '';
        this.$emit('onClearClick');
      },
      onChange(e){ //输入监听事件
        const {value} = e.mp.detail;
        this.$emit('onChange',value);
      },
      onConfirm(e){  //点击虚拟键盘搜索事件
        const {value} = e.mp.detail;
        this.$emit('onConfirm',value);
      },
      setValue(v){ //对输入框关键字赋值
        this.searchWord = v;
      },
      getValue(){ //获取输入框的关键字
        return this.searchWord;
      },

    },
  }
</script>

<style lang="less" scoped>
.search-bar{
  margin: 15px 16px 0 16px;
  .search-bar-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    box-sizing: border-box;
    padding: 12px 17px;
    background: #F5F7F9;
    border-radius: 40px;
    .search-input{
      flex: 1;
      margin: 0 8px;
    }
    .search,.close{
      display: flex;
      align-items: center;
      height: 100%;
    }
  }
}
</style>
